<template>
    <el-card id="second">
        <div class="title">基本资料</div>
        <el-divider></el-divider>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
                <el-form ref="userForm" :model="user" :rules="rules" label-position="left" label-width="80px">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="user.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="realName">
                        <el-input v-model="user.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="邮件" prop="email">
                        <el-input v-model="user.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phoneNumber">
                        <el-input v-model="user.phoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveOne">保存</el-button>
                        <el-button type="danger" @click="closeNow">关闭</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="其他信息" name="second">
                <el-form ref="otherForm" :model="userMessages" :rules="rules" label-position="left" label-width="80px">
                    <el-form-item label="个性签名" prop="signature">
                        <el-input v-model="userMessages.signature"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="userMessages.sex" >
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                            <el-radio label="2">保密</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveOtherMessage">保存</el-button>
                        <el-button type="danger" @click="closeNow">关闭</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="third">
                <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-position="left" label-width="80px">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input v-model="passwordForm.oldPassword" type="password" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="passwordForm.newPassword" type="password" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="secondPassword">
                        <el-input v-model="passwordForm.secondPassword" type="password" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updateOnePassword">保存</el-button>
                        <el-button type="danger" @click="resetForm('passwordForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script>
    import { Message} from 'element-ui'
    import * as user from '../../api/user'
    import * as userMessages from '../../api/userMessages'
    export default {
        name: "rightCard",
        data(){
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.passwordForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                activeName: 'first',
                user:{
                    id: 0,
                    userName: '',
                    realName: '',
                    email: '',
                    phoneNumber: ''
                },
                userMessages:{
                    signature: '',
                    sex: '0'
                },
                passwordForm:{
                    oldPassword: '',
                    newPassword: '',
                    secondPassword: ''
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    realName: [
                        { required: true, message: '请输入昵称', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮件', trigger: 'blur' }
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入电话', trigger: 'blur' }
                    ],
                    signature: [
                        { required: true, message: '请输入个性签名', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    oldPassword: [
                        { required: true, message: '请输入旧密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' }
                    ],
                    secondPassword: [
                        { required: true, message: '请确认密码', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                }

            }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            closeNow(){
                this.$router.push("/index")
            },
            saveOne(){
                user.updateUser(this.user).then(function (response) {
                    let code = response.data.code
                    if(code===200){
                        Message.success("修改成功")
                    }
                })
            },
            saveOtherMessage(){
                userMessages.updateOneMessages(this.userMessages).then(function (response) {
                    let code = response.data.code
                    if(code===200){
                        Message.success("修改成功")
                    }
                })
            },
            updateOnePassword(){
                let data= this.passwordForm
                data['id']=this.user.id
                console.log(data)
                user.updateOnePassword(data).then(function (response) {
                    if(response.data.code===200){
                        Message.success("密码修改成功")
                    }else if(response.data.code===1004){
                        Message.error("旧密码错误")
                    }
                })
            }
        },
        created() {
            let that =this
            user.getOneUser(this.$store.getters.getUserName).then(function (response) {
                    that.user=response.data.data
            })
            userMessages.getOneMessages(this.$store.getters.getUserName).then(function (response) {
                    let data =response.data.data
                    data['sex']=''+ data['sex']
                    that.userMessages=data
            })
        }
    }
</script>

<style scoped>
    .title{
        text-align:center
    }
</style>
